<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<div id="d1">
				<strong>强调</strong>
				
			</div>
			<div id="d2">
				<button type="button" id="btn1">jq html获取d1内容</button>
				<button type="button" id="btn2">jq html设置d1内容</button>
				<button type="button" id="btn3">jq text获取d1内容</button>
				<button type="button" id="btn4">jq text设置d1内容</button>
			</div>
 			<div id="d3">
				<div id="d3_1">
					<label>
						姓名:<input type="text" id="user"  />
					</label>
				</div>
			</div>
			<div id="d4">
				<button type="button" id="btn5">jq val 获取input内容</button>
				<button type="button" id="btn6">jq val 设置input内容</button>
			</div>
			<div id="d5" class="a">
				<button type="button" id="btn7">jq attr 获取属性</button>
				<button type="button" id="btn8">jq attr 设置属性</button>
				<button type="button" id="btn9">jq attr 设置多个属性</button>
				<button type="button" id="btn10">jq removeAttr() 删除属性</button>
			</div>
		</div>
		<script src="../jQuery/jquery-3.6.0.js"></script>
		<script>
			/* 
			jq 
			html 获取/设置 元素中的 html 内容  
			text 获取/设置 元素中的 文本 内容 
			
			
			val() 	获取/设置 表单中的文本内容
			
			
			attr(key) 						获取某个元素key属性的属性值
			attr(key,value)					设置某个元素key属性的属性值
			attr({key1:value2,key2:value2}) 	设置某个元素多个key属性的属性值
			removeAttr(key) 					删除指定的属性
			
			 */
		
			$(function(){
				// del();
				$("#btn1").click(function(){
					var r1=$("#d1").html();
					console.log("r1:",r1);
					var r2=document.getElementById("d1").innerHTML;
					console.log("r2:",r2);
				});
				
				$("#btn2").click(function(){
					$("#d1").html("<h1>标题</h1>");
				});
				
				$("#btn3").click(function(){
					var r1=$("#d1").text();
					console.log("r1:",r1);
				});
				
				$("#btn4").click(function(){
					$("#d1").text("<h1>标题</h1>");
				});
				
				$("#btn5").click(function(){
					var r=$("#user").val();
					console.log("r:",r);
				});
				
				$("#btn6").click(function(){
					$("#user").val("kky");
				});
				
				$("#btn7").click(function(){
					var id=$("#d5").attr("id");
					console.log("id:",id);
				});
				
				$("#btn8").click(function(){
					$("#d5").attr("name1","d5_1")
				});
				
				$("#btn9").click(function(){
					$("#d5").attr({
						"name2":"d5_2",
						"name3":"d5_3"
					})
				});
				
				$("#btn10").click(function(){
					$("#d5").removeAttr("name1");
				});
				
				
			});
			
			
			function del(){
				console.log("我是删除");
			}
		</script>
	</body>
</html>
